<template>
    <div>
        <el-card style="max-width: 100%">
            <!-- 搜索查询区域 -->
            <template #header>
                <div class="card-header">
                    <el-form :inline="true" :model="business" class="demo-form-inline">
                        <el-form-item label="商家账号" prop="account">
                            <el-input v-model="business.account" placeholder="商家账号" clearable />
                        </el-form-item>
                        <el-form-item label="商家电话" prop="telephone">
                            <el-input v-model="business.telephone" placeholder="商家电话" clearable />
                        </el-form-item>
                        <el-form-item label="联系人姓名" prop="contact">
                            <el-input v-model="business.contact" placeholder="联系人姓名" clearable />
                        </el-form-item>
                        <el-form-item>
                            <template #default="scoped">
                                <el-button type="primary" @click="loadBus()">搜索</el-button>
                                <!-- <el-button plain><router-link to="/addemp">添加员工</router-link></el-button> -->
                            </template>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <!-- 数据显示区域 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="50px" align="center" />
                <el-table-column prop="account" label="商家账号" align="center" />
                <el-table-column prop="regTime" label="商家注册日期" align="center" />
                <el-table-column prop="telephone" label="商家电话" align="center" />
                <el-table-column prop="contact" label="联系人姓名" align="center" />
                <el-table-column label="操作" width="200px" align="center">
                    <template #default="scoped">
                        <el-button type="primary" @click="changeBus(scoped.row), update = true">修改</el-button>
                        <el-button type="danger" @click="delBus(scoped.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页操作区域 -->
            <template #footer>
                <div class="demo-pagination-block">
                    <el-pagination 
                        v-model:current-page="currentPage" 
                        v-model:page-size="pageSize"
                        :page-sizes="[2, 3, 5, 10]"
                        layout="total,sizes, prev, pager, next" 
                        :total="total" 
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </template>
        </el-card>
        <!-- 修改员工信息按钮 -->
        <el-dialog v-model="update" title="请修改需要的信息" width="500">
            <el-form :model="updateDate">
                <el-form-item label="商家账号" prop="account">
                    <el-input v-model="updateDate.account" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="商家密码" prop="password">
                    <el-input v-model="updateDate.password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="手机号" prop="telephone">
                    <el-input v-model="updateDate.telephone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="联系人姓名" prop="contact">
                    <el-input v-model="updateDate.contact" placeholder="请输入角色" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="update = false">取消</el-button>
                    <el-button type="primary" @click="updateBus()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { loadBusinessApi, updateBusinessApi, delBusinessApi } from '@/api/business.js';
export default {
    data() {
        return {
            // 显示的数据
            tableData: [],
            // 搜索对应的数据
            business: [],

            update: false,

            // 分页相关参数
            currentPage: 1,
            pageSize: 2,
            total: [],


            // 修改
            update: false,
            updateDate: {
                id: "",
                account: "",
                password: "",
                telephone: "",
                contact: "",
            },
        }
    },
    methods: {
        // 更新页面
        handleSizeChange() { 
            this.loadBus();
            
         },
        handleCurrentChange() { 
            this.loadBus();
         },

        // 搜索按钮
        onSubmit(row) {
            this.business = row;
         },

        // 加载数据库信息到页面
        loadBus() {
            loadBusinessApi(
                {...this.business,
                currentPage:this.currentPage,
                pageSize:this.pageSize,}
            ).then(resp => {
                this.tableData = resp.data.datas;
                this.total = resp.data.total;
            })
        },

        // 删除商家信息
        delBus(row) {
            delBusinessApi("id=" + row.id).then(resp => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                });
                this.loadBus();
            })
        },

        // 修改商家信息的按钮
        changeBus(row) {
            this.updateDate = row;
            this.update = true;
        },

        // 修改商家信息
        updateBus() {
            updateBusinessApi(this.updateDate).then(resp => {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                });
                this.update = false;
                updateDate = {
                    id: "",
                    account: "",
                    password: "",
                    telephone: "",
                    contact: "",
                };
                this.loadBus();
            })
        },
    },
    created() {
        this.loadBus();
    }
}
</script>

<style scoped></style>